<!DOCTYPE html>
<html lang="zh">
<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>jquery 3d Carousel轮播图插件|DEMO_jQuery之家-自由分享jQuery、html5、css3的插件库</title>
	<link href="http://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
	<link rel="stylesheet" type="text/css" href="css/htmleaf-demo.css">
	<style type="text/css">
		body {
		        font-family:Arial;
		        font-size:12px;
		        background:#ededed;
		      }
		.container{
			background: #fff;
		}
		#carousel {
	        width:960px;
	        /* border:1px solid #222; */
	        height:300px;
	        position:relative;
	        clear:both;
	        overflow:hidden;
	        background:#FFF;
	      }
	      #carousel img {
	        visibility:hidden; /* hide images until carousel can handle them */
	        cursor:pointer; /* otherwise it's not as obvious items can be clicked */
	      }
	      #callback-output{
	      	width: 100%;
	      	min-height: 50px;
	      	background: #fff;
	      	padding: 8px;
	      	height:500px;
        	overflow-y:scroll;
	      }
	</style>
</head>
<body>
	<div class="htmleaf-container">
		<header class="htmleaf-header">
			<h1>jquery 3d Carousel轮播图插件 <span>jQuery Waterwheel Carousel Plugin</span></h1>
			<div class="htmleaf-links">
				<a class="htmleaf-icon icon-htmleaf-home-outline" href="http://www.htmleaf.com/" title="jQuery之家" target="_blank"><span> jQuery之家</span></a>
				<a class="htmleaf-icon icon-htmleaf-arrow-forward-outline" href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201803245038.html" title="返回下载页" target="_blank"><span> 返回下载页</span></a>
			</div>
		</header>
		<div class="container">
			<h1>Carousel Demo</h1>
			    <div id="carousel">
			      <img src="images/1.jpg" id="item-1" />
			      <img src="images/2.jpg" id="item-2" />
			      <img src="images/3.jpg" id="item-3" />
			      <img src="images/4.jpg" id="item-4" />
			      <img src="images/5.jpg" id="item-5" />
			      <img src="images/6.jpg" id="item-6" />
			      <img src="images/7.jpg" id="item-7" />
			      <img src="images/8.jpg" id="item-8" />
			      <img src="images/9.jpg" id="item-9" />
			    </div>
			    <br>
			<a href="#" id="prev" class="btn btn-primary">前一幅</a>　<a href="#" id="next" class="btn btn-primary">下一幅</a>
			<div class="row">
				<div class="col-md-6">
					<h2>Set Options</h2>
					<p>You can set new options for the carousel here. Once you are satisified with the appearance of the carousel, just copy and paste the options into your own implementation.</p>
					<pre>
{
  flankingItems: 3,
  movingToCenter: function ($item) {
    $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
  },
  movedToCenter: function ($item) {
    $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
  },
  movingFromCenter: function ($item) {
    $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
  },
  movedFromCenter: function ($item) {
    $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
  },
  clickedCenter: function ($item) {
    $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
  }
}						
					</pre>
					<a href="#" id="reload">Reload New Options</a>
				</div>
				<div class="col-md-6">
					<h2>Sample callback output</h2>
					      <div id="callback-output">

					      </div>
				</div>
			</div>
		</div>
		<div class="related">
		    <h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
		    <a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201801064917.html">
			  <img src="related/1.jpg" width="300" alt="基于owl-carousel的卡片水平轮播展示特效"/>
			  <h3>基于owl-carousel的卡片水平轮播展示特效</h3>
			</a>
			<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201609214022.html">
			  <img src="related/2.jpg" width="300" alt="兼容IE8的jQuery旋转木马幻灯片插件"/>
			  <h3>兼容IE8的jQuery旋转木马幻灯片插件</h3>
			</a>
		</div>
	</div>
	
	<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js" type="text/javascript"></script>
	<script>window.jQuery || document.write('<script src="js/jquery-1.11.0.min.js"><\/script>')</script>
	<script type="text/javascript" src="js/jquery.waterwheelCarousel.js"></script>
	<script type="text/javascript">
	      $(document).ready(function () {
	        var carousel = $("#carousel").waterwheelCarousel({
	          flankingItems: 3,
	          movingToCenter: function ($item) {
	            $('#callback-output').prepend('movingToCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movedToCenter: function ($item) {
	            $('#callback-output').prepend('movedToCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movingFromCenter: function ($item) {
	            $('#callback-output').prepend('movingFromCenter: ' + $item.attr('id') + '<br/>');
	          },
	          movedFromCenter: function ($item) {
	            $('#callback-output').prepend('movedFromCenter: ' + $item.attr('id') + '<br/>');
	          },
	          clickedCenter: function ($item) {
	            $('#callback-output').prepend('clickedCenter: ' + $item.attr('id') + '<br/>');
	          }
	        });

	        $('#prev').bind('click', function () {
	          carousel.prev();
	          return false
	        });

	        $('#next').bind('click', function () {
	          carousel.next();
	          return false;
	        });

	        $('#reload').bind('click', function () {
	          newOptions = eval("(" + $('#newoptions').val() + ")");
	          carousel.reload(newOptions);
	          return false;
	        });

	      });
	    </script>
</body>
</html>